<html>    
  <head> 
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3-2.0-min.js"></script> 
    <style>
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 1024px;
        height: 768px;
      }
      
      #meters{
        height: 30px;
        width: 800px;
        margin: 10px auto;
        border: 1px solid #000000;
        position: relative;
      }
      
      #value{
        position: absolute;
        padding-top: 5px;
        text-align: center;
        width: 800px;
      }
      
      #pct{
        position: absolute;
        top: 0px;
        height: 30px;
        width: 0px;
        background-color: #FF0000;
      }
    </style>
    
    <script type="text/javascript">
      
      function refreshinfowindow( latLng ){
        $('#test1').gmap3({
          action: ':getElevation', 
          latLng:latLng,
          callback: function($this, results){
            if ( results ) $('#elevation').html("The elevation at this point <br/>is " + results[0].elevation + " meters.");
          }
        });
      }
      
      var max = 4000;
      var last, ts;
      
      function updateLast(){
        var r = (new Date).getTime();
        last = r;
        return r;
      }
      
      function refreshMeterValue( latLng ){
        if ( ts ) clearTimeout(ts);
        ts = setTimeout(
          function(){doRefreshMeterValue( latLng )},
          200
        );
      }
      
      function doRefreshMeterValue( latLng ){
        var myLast = updateLast();
        $('#test1').gmap3({
          action: ':getElevation', 
          latLng:latLng,
          callback: function($this, results){
            if ( !results ) return;
            if ( myLast != last ) return;
            var v = Math.min(100, Math.round((results[0].elevation * 100 / max)));
            $('#value').html(Math.round(results[0].elevation) + ' meters');
            $('#pct').css('width', v + '%');
          }
        });
      }
    
      $(function(){
      
        var center = [63.3333333, -150.5];
      
        $('#test1').gmap3(
          { action: ':init',
            options:{
              zoom:8,
              center: center,
              mapTypeId: 'terrain'
            },
            events:{
              mousemove: function($e, map, event){
                refreshMeterValue( event.latLng ); 
              }
            }
          },
          { action:':addMarker',
            latLng: center,
            marker:{
              options:{
                draggable: true
              },
              events:{
                dragend: function($this, sender, event){
                  refreshinfowindow( event.latLng );
                }
              }
            },
            infowindow:{
              options:{
                size: new google.maps.Size(50,20),
                content: '<div id="elevation"></div>'
              },
              onces: {
                domready: function(){
                  refreshinfowindow( center );
                }
              }
            }
          }
        );
        
      });
    </script>  
  </head>
    
  <body>
    <div id="meters"><div id="pct"></div><div id="value"></div></div>
    <div id="test1" class="gmap3"></div>
  </body>
</html>